<template>
  <div class="ProductList">
    <van-nav-bar :title="bigtitle" left-text left-arrow @click-left="$router.go(-1)">
      <van-icon name="service-o" slot="right" />
    </van-nav-bar>
    <div class="total-tag">
      <p>综合</p>
      <p>销量</p>
      <p @click="sort(flag)">
        价格
        <span class="up"></span>
        <span class="down"></span>
      </p>
      <p>最新</p>
    </div>
    <div class="small-tag">
      <p>送女友</p>
      <p>送男性</p>
      <p>送朋友</p>
      <p>送长辈</p>
      <div class="choose-btn">筛选</div>
    </div>
    <div class="list">
      <div v-for="item in classlist" :key="item._id" class="pro-card">
        <!-- @click="$router.push({name:'Desc'})" -->
        <router-link :to="'/prolist/desc/'+item._id">
          <img :src="item.coverImgUrl" alt="商品图片" />
          <p class="desc">{{item.desc}}</p>
          <p class="price">￥{{item.product_price}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import "../css/productlist.css";
</style>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      classlist: [],
      flag: true,
      bigtitle: "" //搜索关键词，如果能拿到这个关键词，就按照关键词排序，在返回的时候把关键字清空
    };
  },
  created() {
    axios
      .get("http://192.168.17.95:3000/api/v1/flowers?per=436&page=0")
      .then(res => {
        // console.log(res.data.flowers);
        let flowerlist = res.data.flowers;
        this.classlist = flowerlist;
        const classify = this.$route.params.class;
        if (classify) {
          switch (classify) {
            case "love":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 1
              );
              this.bigtitle = "爱情鲜花";
              break;
            case "friend":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 2
              );
              this.bigtitle = "友情鲜花";
              break;
            case "birth":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 3
              );
              this.bigtitle = "生日鲜花";
              break;
            case "elder":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 4
              );
              this.bigtitle = "问候长辈";
              break;
            case "teacher":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 5
              );
              this.bigtitle = "回报老师";
              break;
            case "patient":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 6
              );
              this.bigtitle = "探病鲜花";
              break;
            case "apologize":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 7
              );
              this.bigtitle = "道歉鲜花";
              break;
            case "marry":
              this.classlist = res.data.flowers.filter(
                v => v.classify_id === 8
              );
              this.bigtitle = "婚恋鲜花";
              break;
            case "search":
              if (this.keyword != "") {
                this.classlist = res.data.flowers.filter(
                  v => v.desc.indexOf(this.keyword) != -1
                );
                this.bigtitle = "搜索结果";
              } else {
                this.bigtitle = "所有鲜花";
              }

            // 筛选出所有desc中包含关键词的商品，让当前列表等于筛选后的列表
          }
        } else {
          this.bigtitle = "所有鲜花";
        }

        this.save({
          list: res.data.flowers
        });
      })
      .catch(err => {
        console.log(111);
      });
  },
  methods: {
    ...mapMutations("product", ["save"]),
    sort(flag) {
      if (flag == true) {
        this.classlist.sort((a, b) => {
          return a.product_price - b.product_price;
        });
      } else {
        this.classlist.sort((a, b) => {
          return b.product_price - a.product_price;
        });
      }
      flag = !flag;
      this.flag = flag;
    }
  },
  computed: {
    ...mapState("product", ["list", "keyword"])
  }
};
</script>
<style scoped>
.van-icon-arrow-left,
.van-icon-service-o {
  color: #000;
}
</style>